4.5 Hide and show

Live Chat

(Press the button and hold it to see :active!)

Here are two examples. Try them.

Display - Read all in CSS display Property.
- What kind of display value is used to make elements disapper from the window? 'none'
- Here is an example to hide/show a box. Try to move the mouse over the button. You may also click the button. Note that ':active' can be used for 'pressing' a mouse button.
- Trial 1: Let's try to write the code for the above example.
  <???> ??? { margin:5px; width:50px; height:50px; background-color:LightBlue; } ??? ??? ??? { display:none; } ??? ??? ??? { display:???; background-color:Yellow; } </style> <??? id='tr1-button'>Hide/show</button> <div id='tr1-box'></div>

Learning outcomes
- Use of the display property to hide and show an element, with the pseudo class :hover

Welcome!